<template>
	<div class="table">
		<div class="header">
			<slot name="header">
				<div class="title">{{ title }}</div>
				<div class="handler">
					<slot name="header-handler"></slot>
				</div>
			</slot>
		</div>
		<el-table
			:data="userList"
			border
			style="width: 100%"
			@selection-change="handleSelectionChange"
      v-bind="childrenProps"
		>
			<el-table-column
				v-if="showSelectColumn"
				type="selection"
				align="center"
			></el-table-column>
			<el-table-column
				v-if="showIndexColumn"
				label="序号"
				type="index"
				align="center"
				width="60"
			></el-table-column>
			<template v-for="item in propList" :key="item.createAt">
				<el-table-column v-bind="item" align="center" show-overflow-tooltip>
					<template #default="props">
						<slot :name="item.slotName" :row="props.row">
							{{ props.row[item.prop] }}
						</slot>
					</template>
				</el-table-column>
			</template>
		</el-table>
		<div class="footer" v-if="showFooter">
			<slot name="footer">
				<div class="footer-handler" >
					<el-pagination
						v-model:currentPage="page.currentPage"
						v-model:page-size="page.pageSize"
						:page-sizes="[10, 20, 30, 40]"
						:small="true"
						:background="true"
						layout="total, sizes, prev, pager, next, jumper"
						:total="listCount"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
					/>
				</div>
			</slot>
		</div>
	</div>
</template>

<script lang="ts">
	import { defineComponent } from 'vue'

	export default defineComponent({
		props: {
			propList: {
				type: Array,
				required: true
			},
			userList: {
				type: Array,
				required: true
			},
			showIndexColumn: {
				type: Boolean,
				default: true
			},
			showSelectColumn: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: ''
			},
      listCount:{
        type:Number,
        default:0
      },
      page:{
        type:Object,
        default:()=>({currentPage:0,pageSize:10})
      },
      childrenProps:{
        type:Object,
        default:()=>({})
      },
      showFooter:{
        type:Boolean,
        default:true
      }
		},
		emits: ['selectChange','update:page'],
		setup(props, { emit }) {
			const handleSelectionChange = (value: any) => {
				emit('selectChange', value)
			}
      const handleSizeChange =(pageSize:number)=>{
        emit('update:page',{...props.page,pageSize})
      }
      const handleCurrentChange = (currentPage:number)=>{
        emit('update:page',{...props.page,currentPage})
      }
			return { handleSelectionChange ,handleSizeChange,handleCurrentChange}
		}
	})
</script>


<style lang="less">
	.header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		.title {
			font-size: 20px;
			font-weight: bolder;
		}

	}
  .footer-handler{
    margin-top: 10px;
    display: flex;
    justify-content: center;
  }
  .el-table .el-table__cell{
    // z-index: 0;
  }
</style>